<template>
  <div>
    <div class="box">
      <div class="title">
        <span class="tag"></span>
        选择车辆
      </div>
      <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
        <el-col :span="6">
          <el-form-item label="车牌号:" prop="aaaaa">
            <el-input v-model="queryParams.aaaaa" clearable placeholder="请输入车牌号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车架号:" prop="bbbbb">
            <el-input v-model="queryParams.bbbbb" clearable placeholder="请输入车架号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="品牌:" prop="brandId">
            <el-select v-model="queryParams.brandId" clearable filterable style="width: 100%;" @change="getSeriesName">
              <template v-for="dict in brandList">
                <el-option :label="dict.name" :value="dict.id" :key="dict.id"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车系:" prop="seriesId">
            <el-select v-model="queryParams.seriesId" clearable filterable style="width: 100%;" @change="getModelName">
              <template v-for="dict in seriesList">
                <el-option :label="dict.name" :value="dict.id" :key="dict.id"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车型:" prop="modelId">
            <el-select v-model="queryParams.modelId" filterable style="width: 100%;" clearable>
              <template v-for="dict in carIdList">
                <el-option :label="dict.name" :value="dict.id" :key="dict.id"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车辆状态:" prop="status">
            <el-select v-model="queryParams.status" clearable filterable style="width: 100%;">
              <el-option v-for="dict in dict.type.vehicle_status_contract_renewed" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </SearchContent>

      <table-page ref="el-table" rowKey="ID" :loading="loading" isSelect dataList="carList" border :total="total" :page.sync="queryParamsTable.pageNum" :limit.sync="queryParamsTable.pageSize" @setSizeCurrent="listData" @selectionChange="handleSelectionChange">
        <!-- 普通列插槽 -->
        <template slot="tableCol">
          <el-table-column label="状态" align="center" prop="aaaaaaaaa" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.vehicle_status_contract_renewed" :value="scope.row.aaaaaaaaa" />
            </template>
          </el-table-column>
          <el-table-column label="品牌" align="center" prop="bbbbbbbbb" min-width="150px" show-overflow-tooltip />
          <el-table-column label="车系" align="center" prop="ccccccccc" min-width="150px" show-overflow-tooltip />
          <el-table-column label="车型" align="center" prop="ddddddddd" min-width="360px" show-overflow-tooltip />
          <el-table-column label="能源类型" align="center" prop="eeeeee" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.vehicle_status_contract_renewed" :value="scope.row.eeeeee" />
            </template>
          </el-table-column>
          <el-table-column label="颜色" align="center" prop="vvvv" min-width="150px" show-overflow-tooltip />
          <el-table-column label="月租金(元)" align="center" prop="cc" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>
                {{format_thousand(scope.row.cc)}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="租期(元)" align="center" prop="cac" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>
                {{format_thousand(scope.row.cac)}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="加装费(元)" align="center" prop="cbc" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>
                {{format_thousand(scope.row.cbc)}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="使用性质" align="center" prop="cdc" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.vehicle_status_contract_renewed" :value="scope.row.cdc" />
            </template>
          </el-table-column>
          <el-table-column label="车牌号" align="center" prop="cec" min-width="150px" show-overflow-tooltip />
          <el-table-column label="车架号" align="center" prop="cfc" min-width="150px" show-overflow-tooltip />
          <el-table-column label="交车时间" align="center" prop="cgc" min-width="150px" show-overflow-tooltip />
          <el-table-column label="交车工作人员" align="center" prop="cuc" min-width="150px" show-overflow-tooltip />
        </template>
      </table-page>
    </div>
  </div>
</template>

<script>
import SearchContent from '@/components/SearchContent/index.vue'
import {
  getBrandNames,
  getSeriesName,
  getModelName,
} from "@/api/system/linkageSelect.js";
export default {
  name: 'selectCar',
  dicts: ['vehicle_status_contract_renewed'],
  components: { SearchContent },
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      },
    },
    state: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      brandList: [],
      seriesList: [],
      carIdList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 查询参数
      queryParamsTable: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  computed: {
    formData: {
      get() {
        return this.useVModel.call(this);
      },
      set(val) {
        this.$emit('input', val);
      },
    }
  },
  mounted() {
    this.getBrandNames();
  },
  methods: {
    // 全选字段
    handleSelectionChange(val) {
      console.log(val, 'val');
    },
    listData() {
      // 调取接口
    },
    // 获取品牌
    getBrandNames() {
      getBrandNames({ brandName: "" }).then((res) => {
        this.brandListDig = res;
        this.brandList = res;
      });
    },
    // 获取车系
    getSeriesName() {
      if (this.queryParams.brandId) {
        getSeriesName(this.queryParams.brandId).then((res) => {
          this.seriesList = res;
          this.$set(this.queryParams, 'seriesId', '')
          this.$set(this.queryParams, 'modelId', '')
        });
      } else {
        this.seriesList = [];
        this.carIdList = [];
        this.$set(this.queryParams, 'seriesId', '')
        this.$set(this.queryParams, 'modelId', '')
      }
    },
    // 获取车型
    getModelName() {
      if (this.queryParams.seriesId) {
        getModelName(this.queryParams.seriesId).then((res) => {
          this.carIdList = res;
          this.$set(this.queryParams, 'modelId', '')
        });
      } else {
        this.carIdList = []
        this.$set(this.queryParams, 'modelId', '')
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      },
        this.seriesList = []
      this.carIdList = []
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  border-radius: 8px;
  background-color: #fff;
  .title {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 22px;
    padding-top: 15px;
    padding-bottom: 15px;
    // border-bottom: 1px solid #e9e9e9;
    display: flex;
    align-items: center;
    .tag {
      width: 8px;
      height: 8px;
      background-color: #1890ff;
      border-radius: 100%;
      margin-right: 10px;
    }
  }
}
</style>
